<template>
  <!-- 输入框类型 -->
  <wd-input
    v-if="type === 'input'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :clearable="clearable"
    :value="modelValue"
    :placeholder="placeholder"
    :type="inputType"
    @input="handleInput"
    @clear="handleClear"
  />

  <!-- 下拉选择器类型（支持单选/多选） -->
  <wd-select-picker
    v-else-if="type === 'select-picker'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :value="modelValue"
    :columns="columns"
    :placeholder="placeholder"
    @change="handleSelectChange"
  />

  <!-- 弹出选择器类型 -->
  <wd-picker
    v-else-if="type === 'picker'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :value="modelValue"
    :columns="columns"
    :placeholder="placeholder"
    @confirm="$emit('confirm', $event.value, $event.columns)"
  />

  <!-- 上传组件类型 -->
  <wd-cell
    v-else-if="type === 'upload-cell'"
    :title="label"
    :title-width="labelWidth"
	:prop="prop"
  >
    <wd-upload
      :file-list="Array.isArray(modelValue) ? modelValue : []"
      :action="uploadAction"
      @change="$emit('upload:change', $event.fileList)"
    />
  </wd-cell>
  <wd-textarea
    v-else-if="type === 'textarea'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
	:value="modelValue"
    :placeholder="placeholder || '请输入内容'"
    :clearable="clearable"
    :rows="props.rows || 4"   
    @input="handleInput"      
    @clear="handleClear"      
    @change="$emit('change', modelValue)"  
  />
</template>

<script setup>
import { computed } from 'vue'

// 组件属性定义（新增多选相关属性）
const props = defineProps({
  // 基础通用属性
  label: { type: String, required: true },
  labelWidth: { type: String, default: '100px' },
  prop: { type: String, required: true },
  modelValue: { 
    type: [String, Number, Array], 
    default: () => [] 
  },
  placeholder: { type: String, default: '' },
  rules: { type: Array, default: () => [] },

  // 组件类型
  type: {
    type: String,
    default: 'input',
    validator: (val) => ['input', 'select-picker', 'picker', 'upload-cell'].includes(val)
  },

  // 输入框专属属性
  clearable: { type: Boolean, default: false },
  inputType: { type: String, default: 'text' },

  // 选择器专属属性（新增多选配置）
  columns: {
    type: Array,
    default: () => [],
    required: (props) => props.type === 'select-picker' || props.type === 'picker'
  },

  // 上传组件专属属性
  uploadAction: {
    type: String,
    required: (props) => props.type === 'upload-cell'
  }
})

// 事件定义
const emit = defineEmits([
  'update:modelValue',
  'input',
  'clear',
  'change',
  'confirm',
  'upload:change'
])

// 处理选择器变更（核心修复：多选值同步与显示）
const handleSelectChange = (event) => {
  // 1. 同步选中值到父组件（多选时是数组，单选时是单个值）
  emit('update:modelValue', event.value)
  
  // 2. 传递额外信息给父组件
  emit('change', event.value, event.column)
}

// 输入框事件处理
const handleInput = (value) => {
  emit('update:modelValue', value)
  emit('input', value)
}

const handleClear = () => {
  emit('update:modelValue', '')
  emit('clear')
}
</script>

<style scoped>
/* 统一表单项间距 */
::v-deep .wd-input,
::v-deep .wd-select-picker,
::v-deep .wd-picker,
::v-deep .wd-cell {
  margin-bottom: 0 !important;
}

/* 修复多选显示问题的关键样式 */
::v-deep .wd-select-picker {
  /* 确保输入框有足够宽度显示多个选项 */
  width: 100% !important;
}

::v-deep .wd-select-picker__input {
  /* 处理多选文本溢出 */
  width: calc(100% - 40px) !important;
  padding-right: 0 !important;
  text-align: left !important;
  white-space: normal !important;  /* 允许文本换行 */
  min-height: 36px !important;     /* 确保有足够高度显示多行文本 */
}

/* 选择器图标样式 */
::v-deep .wd-select-picker__icon,
::v-deep .wd-picker__icon {
  color: #999;
  align-self: flex-start !important;  /* 图标顶部对齐 */
  margin-top: 8px;
}

/* 多选标签样式优化 */
::v-deep .wd-select-picker__tags {
  flex-wrap: wrap !important;  /* 标签自动换行 */
  gap: 4px !important;        /* 标签间距 */
  padding: 2px 0 !important;
}

::v-deep .wd-select-picker__tag {
  margin-bottom: 4px !important;  /* 标签上下间距 */
}
</style>
